<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>在线课程学习网站</title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="robots" content="all,follow" />
    <link rel="stylesheet" href="vendor/swiper/swiper-bundle.min.css" />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Nunito:300,400&amp;display=swap"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Abril+Fatface&amp;display=swap"
    />
    <link rel="stylesheet" href="css/style.default.css" id="theme-stylesheet" />
    <link rel="stylesheet" href="css/custom.css" />
    <link rel="stylesheet" href="vendor/swiper/swiper-bundle.min.css" />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Nunito:300,400&amp;display=swap"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Abril+Fatface&amp;display=swap"
    />
    <link rel="stylesheet" href="css/style.default.css" id="theme-stylesheet" />
    <link rel="stylesheet" href="css/custom.css" />
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/slide.css" />
    <link rel="stylesheet" href="css/index.css" />
  </head>
  <style>
    .banner {
      position: relative;
      overflow: hidden;
      width: 100%;
      max-width: 1000px;
      margin: 0 auto;
    }

    .slides {
      display: flex;
      transition: transform 0.5s ease;
    }

    .slides img {
      width: 100%;
      height: auto;
      object-fit: cover;
    }

    .prev,
    .next {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background-color: rgba(0, 0, 0, 0.5);
      color: white;
      border: none;
      cursor: pointer;
      padding: 10px;
      z-index: 2;
    }

    .prev {
      left: 10px;
    }

    .next {
      right: 10px;
    }
  </style>
  <body>
    <!-- 网页头部 -->
    <header class="header">
      <!-- 导航栏 -->
      <nav
        class="navbar navbar-expand-lg navbar-light border-gray py-2 bg-light"
      >
        <div class="container">
          <button
            class="navbar-toggler navbar-toggler-right mx-auto border-0"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span class="navbar-toggler-icon"></span>
          </button>
          <div
            class="collapse navbar-collapse text-center"
            id="navbarSupportedContent"
          >
            <ul class="navbar-nav mx-auto" style="font-size: 20px">
              <li class="nav-item px-1">
                <a class="nav-link active" href="./index.html"
                  >HTML</a
                >
              </li>
              <li class="nav-item px-1">
                <a class="nav-link" href="./css.html">CSS</a>
              </li>
              <li class="nav-item px-1">
                <a class="nav-link" href="./js.html">JS</a>
              </li>
              <li class="nav-item px-1">
                <a class="nav-link" href="./login.html">login</a>
              </li>
              <li class="nav-item px-1">
                <a
                  class="nav-link"
                  href="https://gitee.com/lover_3/final.git"
                  >Gitee</a
                >
              </li>
              <li class="nav-item px-1">
                <a
                  class="nav-link"
                  href="https://www.bilibili.com/video/BV1CR3seaEzG/"
                  >Video</a
                >
              </li>
            </ul>
          </div>
        </div>
      </nav>
      <!-- 轮播图 -->
      <div style="max-width: 100%; margin-top: 20px">
        <div class="banner">
          <div class="slides">
            <img src="./img/1.png" alt="Banner 1" />
            <img src="./img/2.png" alt="Banner 2" />
            <img src="./img/3.png" alt="Banner 3" />
            <img src="./img/4.png" alt="Banner 4" />
            <img src="./img/5.png" alt="Banner 5" />
            <img src="./img/6.png" alt="Banner 6" />
          </div>
          <button class="prev">&lt;</button>
          <button class="next">&gt;</button>
        </div>
      </div>
    </header>
    <!-- 课程卡片 -->
    <section class="pt-5">
      <div class="container">
        <h1>数字化在线课程学习网站</h1>
        <p class="mb-0">
          提供多种数字化在线课程，帮助学习者随时随地获取知识并提升技能
        </p>
      </div>
      <div class="swiper destinations-slider swiper-padding">
        <div class="swiper-wrapper">
          <div class="swiper-slide h-auto">
            <a
              class="destination d-flex align-items-end bg-center bg-cover"
              href="https://www.bilibili.com/video/BV1qe411G7cz/?spm_id_from=333.337.search-card.all.click&vd_source=bfedfe641e839a2539545a4b015ecc8b"
              style="
                background: url(https://course-net.com/blog/wp-content/uploads/2022/11/html-1.png);
              "
            >
              <div
                class="destination-inner w-100 text-center text-white index-forward has-transition"
              >
                <p class="small text-uppercase mb-0">HTML 元素语法</p>
                <h2 class="h3 mb-4">HTML 元素</h2>
                <div class="btn btn-primary w-100 destination-btn text-white">
                  了解更多
                </div>
              </div>
            </a>
          </div>
          <div class="swiper-slide h-auto">
            <a
              class="destination d-flex align-items-end bg-center bg-cover"
              href="https://www.bilibili.com/video/BV1Qd4y197GM/?spm_id_from=333.337.search-card.all.click"
              style="
                background: url(https://course-net.com/blog/wp-content/uploads/2022/11/html-1.png);
              "
            >
              <div
                class="destination-inner w-100 text-center text-white index-forward has-transition"
              >
                <p class="small text-uppercase mb-0">HTML 属性常用引用属性值</p>
                <h2 class="h3 mb-4">HTML 属性</h2>
                <div class="btn btn-primary w-100 destination-btn text-white">
                  了解更多
                </div>
              </div>
            </a>
          </div>
          <div class="swiper-slide h-auto">
            <a
              class="destination d-flex align-items-end bg-center bg-cover"
              href="https://www.bilibili.com/video/BV1id4y1c7HR/?spm_id_from=333.337.search-card.all.click"
              style="
                background: url(https://course-net.com/blog/wp-content/uploads/2022/11/html-1.png);
              "
            >
              <div
                class="destination-inner w-100 text-center text-white index-forward has-transition"
              >
                <p class="small text-uppercase mb-0">
                  标题来快速判断您的网页内容和主题
                </p>
                <h2 class="h3 mb-4">HTML 标题</h2>
                <div class="btn btn-primary w-100 destination-btn text-white">
                  了解更多
                </div>
              </div>
            </a>
          </div>
          <div class="swiper-slide h-auto">
            <a
              class="destination d-flex align-items-end bg-center bg-cover"
              href="https://www.bilibili.com/video/BV1Da411W76j/?spm_id_from=333.337.search-card.all.click&vd_source=bfedfe641e839a2539545a4b015ecc8b"
              style="
                background: url(https://course-net.com/blog/wp-content/uploads/2022/11/html-1.png);
              "
            >
              <div
                class="destination-inner w-100 text-center text-white index-forward has-transition"
              >
                <p class="small text-uppercase mb-0">段落是通过标签定义的</p>
                <h2 class="h3 mb-4">HTML 段落</h2>
                <div class="btn btn-primary w-100 destination-btn text-white">
                  了解更多
                </div>
              </div>
            </a>
          </div>
          <div class="swiper-slide h-auto">
            <a
              class="destination d-flex align-items-end bg-center bg-cover"
              href="https://www.bilibili.com/video/BV1g44y1A7Be/?spm_id_from=333.337.search-card.all.click"
              style="
                background: url(https://course-net.com/blog/wp-content/uploads/2022/11/html-1.png);
              "
            >
              <div
                class="destination-inner w-100 text-center text-white index-forward has-transition"
              >
                <p class="small text-uppercase mb-0">HTML 文本格式化标签</p>
                <h2 class="h3 mb-4">HTML 文本格式化</h2>
                <div class="btn btn-primary w-100 destination-btn text-white">
                  了解更多
                </div>
              </div>
            </a>
          </div>
          <div class="swiper-slide h-auto">
            <a
              class="destination d-flex align-items-end bg-center bg-cover"
              href="https://www.bilibili.com/video/BV1Qp421d7js/?spm_id_from=333.337.search-card.all.click&vd_source=bfedfe641e839a2539545a4b015ecc8b"
              style="
                background: url(https://course-net.com/blog/wp-content/uploads/2022/11/html-1.png);
              "
            >
              <div
                class="destination-inner w-100 text-center text-white index-forward has-transition"
              >
                <p class="small text-uppercase mb-0">
                  HTML 使用超级链接与网络上的另一个文档相连
                </p>
                <h2 class="h3 mb-4">HTML 链接</h2>
                <div class="btn btn-primary w-100 destination-btn text-white">
                  了解更多
                </div>
              </div>
            </a>
          </div>
          <div class="swiper-slide h-auto">
            <a
              class="destination d-flex align-items-end bg-center bg-cover"
              href="https://www.bilibili.com/video/BV1Bs411N7mg/?spm_id_from=333.337.search-card.all.click"
              style="
                background: url(https://course-net.com/blog/wp-content/uploads/2022/11/html-1.png);
              "
            >
              <div
                class="destination-inner w-100 text-center text-white index-forward has-transition"
              >
                <p class="small text-uppercase mb-0">实现页内或跨页跳转</p>
                <h2 class="h3 mb-4">HTML 锚点</h2>
                <div class="btn btn-primary w-100 destination-btn text-white">
                  了解更多
                </div>
              </div>
            </a>
          </div>
          <div class="swiper-slide h-auto">
            <a
              class="destination d-flex align-items-end bg-center bg-cover"
              href="https://www.bilibili.com/video/BV1RTg4eJEBv/?spm_id_from=333.337.search-card.all.click&vd_source=bfedfe641e839a2539545a4b015ecc8b"
              style="
                background: url(https://course-net.com/blog/wp-content/uploads/2022/11/html-1.png);
              "
            >
              <div
                class="destination-inner w-100 text-center text-white index-forward has-transition"
              >
                <p class="small text-uppercase mb-0">html空格符号代码</p>
                <h2 class="h3 mb-4">html 空格符</h2>
                <div class="btn btn-primary w-100 destination-btn text-white">
                  了解更多
                </div>
              </div>
            </a>
          </div>
          <div class="swiper-slide h-auto">
            <a
              class="destination d-flex align-items-end bg-center bg-cover"
              href="https://www.bilibili.com/video/BV1ev411W7EC/?spm_id_from=333.337.search-card.all.click"
              style="
                background: url(https://course-net.com/blog/wp-content/uploads/2022/11/html-1.png);
              "
            >
              <div
                class="destination-inner w-100 text-center text-white index-forward has-transition"
              >
                <p class="small text-uppercase mb-0">
                  览器在何处可以找到样式表
                </p>
                <h2 class="h3 mb-4">HTML 头部元素</h2>
                <div class="btn btn-primary w-100 destination-btn text-white">
                  了解更多
                </div>
              </div>
            </a>
          </div>
          <div class="swiper-slide h-auto">
            <a
              class="destination d-flex align-items-end bg-center bg-cover"
              href="https://www.bilibili.com/video/BV1dP3gegEKd/?spm_id_from=333.337.search-card.all.click"
              style="
                background: url(https://course-net.com/blog/wp-content/uploads/2022/11/html-1.png);
              "
            >
              <div
                class="destination-inner w-100 text-center text-white index-forward has-transition"
              >
                <p class="small text-uppercase mb-0">html页面中可以插入图像</p>
                <h2 class="h3 mb-4">HTML 图像</h2>
                <div class="btn btn-primary w-100 destination-btn text-white">
                  了解更多
                </div>
              </div>
            </a>
          </div>
          <div class="swiper-slide h-auto">
            <a
              class="destination d-flex align-items-end bg-center bg-cover"
              href="https://www.bilibili.com/video/BV1MF411K7Bc/?spm_id_from=333.337.search-card.all.click"
              style="
                background: url(https://course-net.com/blog/wp-content/uploads/2022/11/html-1.png);
              "
            >
              <div
                class="destination-inner w-100 text-center text-white index-forward has-transition"
              >
                <p class="small text-uppercase mb-0">
                  表格其实就是很多的小单元格
                </p>
                <h2 class="h3 mb-4">HTML 表格</h2>
                <div class="btn btn-primary w-100 destination-btn text-white">
                  了解更多
                </div>
              </div>
            </a>
          </div>
        </div>
        <div
          class="swiper-button-prev swiper-custom-nav text-uppercase letter-spacing-0"
        >
          <svg class="svg-icon svg-icon me-1">
            <use xlink:href="#arrow-left-1"></use></svg
          ><span class="text-sm">前一个</span>
        </div>
        <div
          class="swiper-button-next swiper-custom-nav text-uppercase letter-spacing-0"
        >
          <span class="text-sm">后一个</span>
          <svg class="svg-icon svg-icon ms-1">
            <use xlink:href="#arrow-right-1"></use>
          </svg>
        </div>
      </div>
    </section>
    <!-- 单个课程介绍 -->
    <section class="py-5">
      <div class="container py-4">
        <div class="row align-items-stretch gx-lg-0">
          <div class="col-lg-6 order-2 order-lg-1 bg-full-left">
            <div class="h-100 bg-light d-flex align-items-center">
              <div class="py-5 px-4">
                <p
                  class="text-primary font-weight-bold small text-uppercase mb-2"
                >
                  HTML 元素语法
                </p>
                <h3 class="h4">
                  <a class="text-reset" href="https://www.bilibili.com/video/BV1qe411G7cz/?spm_id_from=333.337.search-card.all.click&vd_source=bfedfe641e839a2539545a4b015ecc8b">HTML 元素</a>
                </h3>
                <div class="text-muted">
                  <p>
                    HTML（超文本标记语言）元素是构成网页内容的基本单位。每个元素通常由一个开始标签、内容和一个结束标签组成，例如&lt;div&gt;内容&lt;/div&gt;。HTML元素可以包含文本、图像、链接、表格等各种类型的内容，并通过属性来定义其行为和样式。常见的HTML元素包括段落标签&lt;p&gt;、标题标签&lt;h1&gt;到&lt;h6&gt;、图像标签&lt;img&gt;和链接标签&lt;a&gt;等。通过组合这些元素，开发者能够创建结构化且有意义的网页内容。
                  </p>
                  <p>
                    HTML元素是用于构建网页的基础构件。它们通过标签来定义，其中包括开始标签和结束标签，如&lt;p&gt;和&lt;/p&gt;。这些元素用于在网页上显示各种内容，如文本、图像、视频和链接。HTML元素还可以嵌套使用，以创建复杂的布局和结构。常见的HTML元素有列表标签&lt;ul&gt;和&lt;ol&gt;、表格标签&lt;table&gt;、表单标签&lt;form&gt;等。通过适当使用HTML元素，开发者能够确保网页内容的语义性和可访问性。
                  </p>
                </div>
                <ul class="list-inline small text-uppercase mb-0">
                  <li class="list-inline-item align-middle">
                    <img
                      class="rounded-circle shadow-sm"
                      src="https://logowik.com/content/uploads/images/adobe-creative-cloud6378.jpg"
                      alt=""
                      width="30"
                    />
                  </li>
                  <li class="list-inline-item me-0 text-gray align-middle">
                    来自
                  </li>
                  <li class="list-inline-item align-middle me-0">
                    <a class="fw-bold reset-anchor" href="https://creativecloud.adobe.com/zh-Hans"
                      >Adobe Creative Cloud</a
                    >
                  </li>
                  <li class="list-inline-item text-gray align-middle me-0">
                    |
                  </li>
                  <li class="list-inline-item text-gray align-middle">
                    June, 2024
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="col-lg-6 order-1 order-lg-2">
            <a
              class="d-block h-100 bg-center bg-cover"
              href="https://www.bilibili.com/video/BV1qe411G7cz/?spm_id_from=333.337.search-card.all.click&vd_source=bfedfe641e839a2539545a4b015ecc8b"
              style="
                background: url(https://www.freecodecamp.org/news/content/images/2021/09/divTag.png);
              "
            ></a>
          </div>
        </div>
      </div>
    </section>
    <!-- 所有课程-->
    <section class="pb-5">
      <div class="container pb-4">
        <header class="text-center mb-5">
          <h2>展示课程</h2>
          <p>基本课程展示</p>
        </header>
        <div class="row">
          <div class="col-lg-3 col-md-6 px-md-1 py-1">
            <a
              class="instagram-item d-block w-100 h-100 reset-anchor text-white"
              href="./in1.html"
              ><img
                class="img-fuck"
                src="https://ts1.cn.mm.bing.net/th/id/R-C.66644254bd3ba3e8ba823f4d2ac2dc16?rik=WLpZfGGx9ETBxw&riu=http%3a%2f%2fmmbiz.qpic.cn%2fmmbiz_png%2fPxLPibq1ibyh3PAv46X1tM1zFQG0IXVznQPNIEIfnmQeX1jDDpWLbEic493j6RWYqlv75PicfXvINtIGxQRlUlYISg%2f0%3fwx_fmt%3dpng&ehk=WwPTfFhEREUuBj4sENlD98yc2ehTTYR9souJkO3DWUc%3d&risl=&pid=ImgRaw&r=0"
                alt=""
              />
              <div class="instagram-item-overlay p-5">
                <h6>小程序开发</h6>
              </div>
            </a>
          </div>
          <div class="col-lg-3 col-md-6 px-md-1 py-1">
            <a
              class="instagram-item d-block w-100 h-100 reset-anchor text-white"
              href="./in2.html"
              ><img
                class="img-fuck"
                src="https://atts.w3cschool.cn/attachments/image/20210601/1622530984280929.jpeg"
                alt=""
              />
              <div class="instagram-item-overlay p-5">
                <h6>软件测试技术</h6>
              </div>
            </a>
          </div>
          <div class="col-lg-3 col-md-6 px-md-1 py-1">
            <a
              class="instagram-item d-block w-100 h-100 reset-anchor text-white"
              href="./in3.html"
              ><img
                class="img-fuck"
                src="https://hold.teacher.vocational.smartedu.cn/group1/M00/05/53/CgoAGGJ4tSaAGzccAACwiCFwBuU860.jpg"
                alt=""
              />
              <div class="instagram-item-overlay p-5">
                <h6>程序设计基础</h6>
              </div>
            </a>
          </div>
          <div class="col-lg-3 col-md-6 px-md-1 py-1">
            <a
              class="instagram-item d-block w-100 h-100 reset-anchor text-white"
              href="./in4.html"
              ><img
                class="img-fuck"
                src="https://iotekimg.zhizuobiao.com/zzb/201127093107/F4B3.jpg"
                alt=""
              />
              <div class="instagram-item-overlay p-5">
                <h6>数据高级应用</h6>
              </div>
            </a>
          </div>
          <div class="col-lg-3 col-md-6 px-md-1 py-1">
            <a
              class="instagram-item d-block w-100 h-100 reset-anchor text-white"
              href="./in5.html"
              ><img
                class="img-fuck"
                src="https://img2.sycdn.imooc.com/6295cf4e0001947b06730362.jpg"
                alt=""
              />
              <div class="instagram-item-overlay p-5">
                <h6>后端技术与项目开发</h6>
              </div>
            </a>
          </div>
          <div class="col-lg-3 col-md-6 px-md-1 py-1">
            <a
              class="instagram-item d-block w-100 h-100 reset-anchor text-white"
              href="./in6.html"
              ><img
                class="img-fuck"
                src="https://pic4.zhimg.com/v2-e11c2220bc3fcb328ce604c1441e8e5a_1440w.jpg?source=172ae18b"
                alt=""
              />
              <div class="instagram-item-overlay p-5">
                <h6>web前端开发技术</h6>
              </div>
            </a>
          </div>
          <div class="col-lg-3 col-md-6 px-md-1 py-1">
            <a
              class="instagram-item d-block w-100 h-100 reset-anchor text-white"
              href="./in7.html"
              ><img
                class="img-fuck"
                src="https://pic.jg.com.cn/img/cda/e5c9aa03fe68747470733a2f2f696d67323031382e636e626c6f67732e636f6d2f626c6f672f313632333435352f3230313930342f313632333435352d32303139303431313137313830323431392d313432373639343630342e6a7067b342e455f2.jpg"
                alt=""
              />
              <div class="instagram-item-overlay p-5">
                <h6>专业技能综合实践</h6>
              </div>
            </a>
          </div>
          <div class="col-lg-3 col-md-6 px-md-1 py-1">
            <a
              class="instagram-item d-block w-100 reset-anchor text-white"
              href="./in8.html"
              ><img
                class="img-fluid"
                src="https://img.zcool.cn/community/01e2005962da6da8012193a3541697.jpg@3000w_1l_2o_100sh.jpg"
                alt=""
              />
              <div class="instagram-item-overlay p-5">
                <h6>UI网页设计</h6>
              </div>
            </a>
          </div>
        </div>
      </div>
    </section>
    <!-- 小组成员介绍 -->
    <section class="py-5 bg-light">
      <div class="container py-4">
        <header class="text-center mb-5">
          <h2>小组成员</h2>
          <p>小组成员介绍及其负责的部分</p>
        </header>
        <div class="row text-center">
          <div class="col-lg-13 col-md-6">
            <img
              class="mb-4"
              src="https://odin.adobe.com/content/dam/mcs/zh_cn/icons/raw/svg/ps_appicon.svg"
              alt=""
              height="150"
            />
            <h3 class="h5">范玉</h3>
            <p class="text-sm text-muted">导航栏菜单的设计与制作</p>
          </div>
          <div class="col-lg-13 col-md-6">
            <img
              class="mb-4"
              src="https://mcs.odin.adobe.com/content/dam/mcs/zh_cn/icons/raw/svg/pr_appicon.svg"
              alt=""
              height="150"
            />
            <h3 class="h5">来爽</h3>
            <p class="text-sm text-muted">轮播图的设计与制作</p>
          </div>
          <div class="col-lg-13 col-md-6">
            <img
              class="mb-4"
              src="https://odin.adobe.com/content/dam/mcs/zh_cn/icons/raw/svg/ae_appicon.svg"
              alt=""
              height="150"
            />
            <h3 class="h5">李名媛</h3>
            <p class="text-sm text-muted">课程卡片的设计与制作</p>
          </div>
          <div class="col-lg-13 col-md-6">
            <img
              class="mb-4"
              src="https://odin.adobe.com/content/dam/mcs/zh_cn/icons/raw/svg/ai_appicon.svg"
              alt=""
              height="150"
            />
            <h3 class="h5">周文聪</h3>
            <p class="text-sm text-muted">课程列表的设计与制作</p>
          </div>
          <div class="col-lg-13 col-md-6">
            <img
              class="mb-4"
              src="https://odin.adobe.com/content/dam/mcs/zh_cn/icons/raw/svg/au_appicon.svg"
              alt=""
              height="150"
            />
            <h3 class="h5">陆宗男</h3>
            <p class="text-sm text-muted">主页及响应式的设计与制作</p>
          </div>
        </div>
      </div>
    </section>
    <!-- 页脚 -->
    <footer class="bg-dark py-4">
      <div class="container">
        <div class="row py-2 gy-2">
          <div class="col-lg-4 text-center text-lg-start">
            <p class="small text-muted text-uppercase mb-0">
              &copy; 4090Ti bulc.revoledoc 版权所没有
            </p>
          </div>
          <div class="col-lg-4 text-center"></div>
          <div class="col-lg-4 text-center text-lg-end">
            <p class="small text-muted text-uppercase mb-0">
              <a target="_blank" href="https://gdga.gd.gov.cn/" title="联系我们"
                >联系我们</a
              >.
            </p>
          </div>
        </div>
      </div>
    </footer>
    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="vendor/swiper/swiper-bundle.min.js"></script>
    <script src="js/front.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="vendor/swiper/swiper-bundle.min.js"></script>
    <script src="js/front.js"></script>
    <script src="./js/2.js"></script>
    <script src="./js/jquery-3.2.1.min.js"></script>
    <script src="./js/slide.min.js"></script>
    <script>
      function injectSvgSprite(path) {
        var ajax = new XMLHttpRequest();
        ajax.open("GET", path, true);
        ajax.send();
        ajax.onload = function (e) {
          var div = document.createElement("div");
          div.className = "d-none";
          div.innerHTML = ajax.responseText;
          document.body.insertBefore(div, document.body.childNodes[0]);
        };
      }
      injectSvgSprite("icons/orion-svg-sprite.svg");

      // ----------
      $(function () {
        //3d
        $("#slide3d").slideCarsousel({
          slideType: "3d",
          indicatorEvent: "mouseover",
        });
        //2d
        var sliderDescArr = [],
          i = 0,
          len = 10;
        for (; i < len; i++) {
          sliderDescArr.push(new Array(10).join("" + i));
        }
        $("#sliderDesc").text(sliderDescArr[0]);
        $("#slide2d").slideCarsousel({
          callbackFunc: function (index) {
            $("#sliderDesc1").text(sliderDescArr[index]);
          },
        });
      });
      function injectSvgSprite(path) {
        var ajax = new XMLHttpRequest();
        ajax.open("GET", path, true);
        ajax.send();
        ajax.onload = function (e) {
          var div = document.createElement("div");
          div.className = "d-none";
          div.innerHTML = ajax.responseText;
          document.body.insertBefore(div, document.body.childNodes[0]);
        };
      }
      injectSvgSprite("icons/orion-svg-sprite.svg");
    </script>
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.7.1/css/all.css"
      integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
      crossorigin="anonymous"
    />
  </body>
</html>
